<template>
  <div id="app">
    <meta name="referrer" content="no-referrer" />
    <LogIn v-if="$store.state.flag"></LogIn>
    <div class="app">
      <keep-alive include="home,my,bookshelf,details,sort" v-if="showNav">
        <router-view>
          <slot></slot>
        </router-view>
      </keep-alive>

      <tab-nav v-if="!$route.meta.hideNav && showNav"></tab-nav>
      <div style="height: 50px" v-if="!$route.meta.hideNav"></div>
    </div>
  </div>
</template>

<script>
import TabNav from "@/components/TabNav.vue";
import LogIn from "./components/LogIn.vue";
export default {
  components: { TabNav，LogIn },
  data() {
    return {
      timeNum: 5,
      showNav: false,
    };
  },
  created() {
    this.advertise();
  },
  methods: {
    btn() {
      this.$store.commit("changeVideo", false);
      this.showNav = true
    },
    advertise() {
      if (this.$store.state.showVideo == true) {
        setInterval(() => {
          this.timeNum--;
          if (this.timeNum == 0) {
            // console.log("关闭");
            this.showNav = true,
              this.$store.commit("changeVideo", false);
            this.timeNum = 5;
          }
        }, 1000);
      }
      if (this.$store.state.showVideo == false) {
        this.showNav = true
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#app {
  .app {
    min-height: 100vh;
  }
}

.video {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  video {
    width: 100vw;
  }

  img {
    width: 100vw;
  }

  .clear {
    font-size: 13px;
    color: #fff;
    width: 75px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    position: absolute;
    top: 3vw;
    right: 3vh;
  }
}
</style>